<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh">
<!--<![endif]-->
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>

<head>
    <meta charset="utf-8"/>
    <%@include file="../common/taglib.jsp" %>
    <title>保险代理后台管理系统</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <jsp:include page="../common/header.jsp"></jsp:include>
    <!-- ================== END BASE CSS STYLE ================== -->

    <!-- ================== 单独作用于本页表格td ================== -->
    <style>
        .form-control {
            width: 200px;
        }
    </style>
    <!-- ================== 单独作用于本页表格td ================== -->

</head>
<body>
<!-- begin #page-loader -->
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
    <jsp:include page="../common/top.jsp"/>

    <!-- begin #sidebar -->
    <jsp:include page="../common/sitebar.jsp"/>
    <div class="sidebar-bg"></div>
    <!-- end #sidebar -->

    <!-- begin #content -->
    <div id="content" class="content">
        <div class="row">
            <!-- begin col-12 -->
            <div class="col-md-12">
                <!-- begin panel -->
                <div class="panel panel-inverse">
                    <section class="pad-top-10 pad-bottom-20">

                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab1" id="list" data-toggle="tab">数据字典</a></li>
                            <shiro:hasPermission name="数据字典-列表-新增">
                                <li><a href="#tab2" onclick="toadd()" data-toggle="tab">新增</a></li>
                            </shiro:hasPermission>
                            <shiro:hasPermission name="数据字典-列表-编辑">
                                <li><a href="#tab3" id="tabEdit" data-toggle="tab" class="hidden">编辑</a></li>
                            </shiro:hasPermission>
                        </ul>

                    </section>
                    <div>
                        <div class="table-responsive">
                            <div class="form-wrap mar-bottom-0">
                                <div class="tab-content">
                                    <div id="tab1" class="tab-pane fade active in">
                                        <form class="form-inline">
                                            <div class="form-group m-r-10">
                                                <label>类型/描述：</label>
                                                <input type="text" class="form-control" id="gadname">
                                            </div>
                                            <button type="button" class="btn btn-primary"
                                                    onclick="search()">
                                                查询
                                            </button>
                                        </form>

                                        <table id="gadtable" class="table table-striped table-bordered"
                                               style="word-break:break-all;word-wrap:break-word">
                                            <thead>
                                            <tr>
                                                <th width="15%">类型</th>
                                                <th width="10%">键</th>
                                                <th width="15%">值</th>
                                                <th width="25%">描述</th>
                                                <th width="10%">创建人</th>
                                                <th width="15%">创建时间</th>
                                                <th width="10%">操作</th>
                                            </tr>
                                            </thead>
                                        </table>
                                    </div>


                                    <div id="tab2" class="tab-pane fade">
                                        <iframe width="100%" frameborder="0" id="iframe" height="255"></iframe>
                                    </div>

                                    <div id="tab3" class="tab-pane fade">
                                        <form role="form" class="form-horizontal form-bordered" method="post"
                                              action="<%=path %>/sysdic/add" id="dicForm" data-parsley-validate="true">
                                            <input type="hidden" name="createUser" id="createUser"
                                                   value="<shiro:principal property="realName" />">
                                            <div class="form-group">
                                                <label class="col-md-1 control-label" style="width: 110px;">类型</label>
                                                <div class="col-md-2">
                                                    <input type="text" class="form-control" id="type" name="type"
                                                           placeholder="请输入字典类型" data-parsley-required="true"
                                                           data-parsley-required-message="类型不能为空"
                                                           data-parsley-maxlength="30"
                                                           data-parsley-maxlength-message="类型最长为30">
                                                </div>
                                                <span id="typeMessage"></span>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-md-4 col-sm-4" style="width: 110px;">键</label>
                                                <div class="col-md-6 col-sm-6">
                                                    <input type="text" class="form-control" id="riskKey" name="riskKey"
                                                           placeholder="请输入键" data-parsley-required="true"
                                                           data-parsley-required-message="键不能为空"
                                                           data-parsley-maxlength="30"
                                                           data-parsley-maxlength-message="键最长为30">
                                                </div>
                                                <span id="riskKeyMessage"></span>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-md-4 col-sm-4" style="width: 110px;"
                                                       >键值</label>
                                                <div class="col-md-6 col-sm-6">
                                                    <input type="text" class="form-control" id="riskValue"
                                                           name="riskValue" placeholder="请输入值"
                                                           data-parsley-required="true"
                                                           data-parsley-required-message="键值不能为空"
                                                           data-parsley-maxlength="100"
                                                           data-parsley-maxlength-message="键值最长为100">
                                                    <span id="riskValueMessage"></span>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-md-4 col-sm-4" style="width: 110px;">字典描述</label>
                                                <div class="col-md-6 col-sm-6">
                                                    <input type="text" class="form-control" id="description"
                                                           name="description" placeholder="请输入字典描述"
                                                           data-parsley-required="true"
                                                           data-parsley-required-message="字典描述不能为空"
                                                           data-parsley-maxlength="200"
                                                           data-parsley-maxlength-message="字典描述最长为200">
                                                    <span id="descriptionMessage"></span>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-md-4 col-sm-4" style="width: 110px;">&nbsp;</label>
                                                <div class="col-md-6 col-sm-6">
                                                    <button type="submit" class="btn btn-primary m-r-10"
                                                            onClick="dic_submit(this);">提交
                                                    </button>
                                                    <a href="#modal-dialog" class="btn btn-default" data-toggle='modal'>&nbsp;取消&nbsp;</a>
                                                </div>
                                            </div>
                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- end panel -->
                    </div>
                    <!-- end col-12 -->
                </div>
                <!-- end row -->
            </div>
        </div>
    </div>
    <!-- end #content -->

    <!-- 提示框 -->
    <div class="modal fade" id="modal-dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">温馨提示</h4>
                </div>
                <div class="modal-body">
                    当前填写内容未提交,确认取消?
                </div>
                <div class="modal-footer">
                    <a href="javascript:;" onclick="tolist()" data-dismiss="modal" class="btn btn-primary">确定</a>
                    <a href="javascript:;" class="btn  btn-default" data-dismiss="modal">取消</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- end page container -->
<jsp:include page="../common/footer.jsp"/>

<!-- ================== END PAGE LEVEL JS ================== -->

<script>

    $(document).ready(function () {
        App.init();
        TableManageFixedHeader.init();
    });

    //删除
    function del(id) {

        Ewin.confirm({message: "确认要删除选择的数据吗？"}).on(function (e) {
            if (!e) {
                return;
            }
            jQuery.ajax({
                type: "GET",
                url: "<%=path%>/sysdic/del/" + id,
                dataType: "json",
                success: function (data) {
                    if (data.success == true) {
                        alert('删除成功!');
                        location.reload();
                    } else {
                        alert('删除失败!');
                        return;
                    }
                }
            });
        });
    }

    var table;
    $(document).ready(function () {
        table = $("#gadtable").DataTable({
            "pagingType": "simple_numbers",//设置分页控件的模式
            searching: false,//屏蔽datatales的查询框
            aLengthMenu: [10],//设置一页展示10条记录
            "bLengthChange": false,//屏蔽tables的一页展示多少条记录的下拉列表
            "oLanguage": {  //对表格国际化
                "sLengthMenu": "每页显示 _MENU_条",
                "sZeroRecords": "无匹配结果，请更换筛选条件再试",
                //  "sProcessing": "&lt;img src=’./loading.gif’ /&gt;",
                "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
                "sInfoEmpty": "当前第 0 - 0 条　共计 0 条",
                "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
                "sSearch": "搜索：",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"

                }
            },
            //"processing": true, //打开数据加载时的等待效果
            "serverSide": true,//打开后台分页
            "order": [[5, "desc"]],
            "ajax": {
                "url": "/sysdic/queryTableData",
                "dataSrc": "aaData",

                "data": function (d) {
                    var description = $('#description').val();
                    var name = $('#gadname').val();
                    //添加额外的参数传给服务器
                    d.type = name;
                    d.description = name;
                }
            },
            "columns": [
                {"data": "type", "bSortable": false},
                {"data": "riskKey", "bSortable": false},
                {"data": "riskValue", "bSortable": false},
                {"data": "description", "bSortable": false},
                {"data": "createUser", "bSortable": false},
                {"data": "createTime", "bSortable": true},

            ],

            "columnDefs": [{
                // 定义操作列,######以下是重点########
                "targets": 6,//是操作按钮目标列
                "data": null,
                "render": function (data, type, row) {
                    var id = '"' + row.id + '"';
                    var html = "<a href='tab3' data-toggle='tab' onclick='toedit(" + id + ")' class='btn-link'>编辑</a>&nbsp;&nbsp;&nbsp;&nbsp;"
                    html += "<a href='javascript:void(0);'   onclick='del(" + id + ")'  class='btn-link'>删除</a>"
                    return html;
                }
            }]

        });
    });

    function search() {
        table.ajax.reload();
    }


    function setIframeHeight(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
            }
        }
    };


    function toadd() {
        $("#iframe").attr("src", "<%=path%>/sysdic/toadd");
        setTimeout(function () {
            setIframeHeight(document.getElementById('iframe'));
        }, 2000)
    }


    function toedit(id) {
        $.ajax({
            type: "post",
            url: "<%=path%>/sysdic/toedit/" + id,
            success: function (msg) {
                $("#type").val(msg.type);
                $("#riskKey").val(msg.riskKey);
                $("#riskValue").val(msg.riskValue);
                $("#description").val(msg.description);
                $("#tabEdit").removeClass("hidden").trigger("click");
            }
        });
    }

    function tolist() {
        $("#tabEdit").addClass("hidden");
        $('#modal-dialog').modal('hide');
        $("#list").trigger("click");
        table.ajax.reload();
        $("#dicForm").find("input").removeClass("parsley-success");
        $("#dicForm").find("input").removeClass("parsley-error");
        $("#dicForm").find("ul").addClass("hidden");
        $("#dicForm2").find("input").val("").removeClass("parsley-error");
        $("#dicForm2").find("input").val("").removeClass("parsley-success");
        $("#dicForm2").find("ul").addClass("hidden");
    }
</script>
</body>
</html>
